<template>
  <div class="search-container">
      <!-- 搜索框 -->
      <form action="/">
        <van-search 
            v-model="searchText" 
            placeholder="请输入搜索关键词" 
            show-action
            @search="onSearch(searchText)"
            @cancel="$router.back()"
            @focus="isResultShow = false"
        />
      </form>

      <!-- 搜索结果 -->
      <search-result 
        v-if="isResultShow"
        :search-text="searchText"
      />

      <!-- 联想建议 -->
      <search-suggestion 
        v-else-if="searchText"
        :search-text="searchText"
        @search="onSearch"
      />

      <!-- 历史记录 -->
      <search-history 
        v-else
        :searchHistories="searchHistories"
        @search="onSearch"
        @update-histories="searchHistories = $event"
      />

      
  </div>
</template>

<script>
import SearchSuggestion from './components/search-suggestion'
import SearchHistory from './components/search-history'
import SearchResult from './components/search-result';
import { setItem, getItem } from '@/utils/storage'
// import { getSearchHistories } from '@/api/search'
import { mapState } from 'vuex'


export default {
  name: 'SearchIndex',
  components: {
      SearchSuggestion,
      SearchHistory,
      SearchResult
  },
  props: {},
  data() {
    return {
        searchText: '', // 搜索的内容
        isResultShow: false, // 控制搜索结果的显示状态
        searchHistories: [] // 搜索历史数据
    };
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {
    searchHistories() {
      setItem('search-histories', this.searchHistories)
    }
  },
  created() {
    // const { data } = await getSearchHistories()
    this.loadSearchHistories()
  },
  mounted() {},
  methods: {
      onSearch(searchText) {
          // 把输入框设置为你要搜索的文本
          this.searchText = searchText

          // 判断是否有重复的
          const index = this.searchHistories.indexOf(searchText)
          if(index !== -1) {
            // 有重复的要删除掉
            this.searchHistories.splice(index, 1)
          }
          // 把最新的搜索历史记录放到顶部
          this.searchHistories.unshift(searchText)

          // 如果用户登录就存储到线上
          // 没有登录就存储到本地
          setItem('search-histories', this.searchHistories)

          // 展示搜索结果
          this.isResultShow = true
      },

      async loadSearchHistories() {
        // 因为后台帮我们储存的用户搜索历史记录太少了，只有4条
        // 所以我们这里我们要将他们合并
        const searchHistories = getItem('search-histories') || []
        // 由于线上删除接口有问题，就只获取本地搜索记录
        // if(this.user) {
        //   const { data } = await getSearchHistories()
        //   // 数组合并去重 [...new Set([...数组， ...数组])]
        //   searchHistories = [...new Set([
        //     ...searchHistories,
        //     ...data.data.keywords
        //   ])]
        // }
        this.searchHistories = searchHistories
      }
  }
};
</script>
<style lang="less" scoped>
.search-container {
  .van-search {
    background-color: #3296fa;
    // /deep/ .van-search__content {
    //   padding-right: 5px !important;
    // }
    .van-search__action {
      // background-color: white;
      color: white;
    }
  }
  
}
</style>